<template>
  <div>
    <div class="lh-40 bor-b pad-lr-20">{{shape ? shape.title : ''}}</div>
    <div class="prop-edit-item mar-t-10 pad-lr-20" v-for="propertie in properties" :key="propertie.key">
      <span class="text-black-2 fts-14 dis-b lh-24">{{propertie.title}}</span>
      <el-input size="medium" @change="change" v-if="propertie.type == 'string'" v-model="propertie.value" placeholder="请输入内容"></el-input>
      <el-input size="medium" @change="change" v-if="propertie.type == 'text' || propertie.type == 'complex'" type="textarea" :rows="3" placeholder="请输入内容" v-model="propertie.value"></el-input>
      <el-cascader class="dis-b" @change="candidateGroupsChange" size="medium" v-if="propertie.type == 'role'" :options="roles" :props="cascaderProps" collapse-tags clearable v-model="candidateGroups"></el-cascader>
    </div>
  </div>
</template>
<script>

export default {
  data(){
    return {
      showProperties: [
        "oryx-name", "oryx-documentation", "oryx-process_author", "oryx-process_version", "oryx-process_namespace",
        "oryx-timercycledefinition", "oryx-timerdatedefinition", "oryx-timerdurationdefinition", "oryx-callactivitycalledelement",
        "oryx-conditionsequenceflow", "oryx-formkeydefinition"
      ],
      properties: [],
      propertie: {},
      propertieValue: '',
      selectedRoleId: '',
      selectedRole: {},
      filterRoleValue: '',
      mFilters: '',
      excludeFields: [ 'oryx-usertaskassignment' ],
      cascaderProps: {
        multiple: true,
        label: 'roleName',
        value: 'id',
        emitPath: false
      },
      candidateGroups: []
    }
  },
  props: {
    shape: {
      type: Object,
      default: null
    },
    roles: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    shape: {
      deep: true,
      handler: function(){
        // this.shape = value;
        this.selectedRole = {};
        this.setShowProperties();
        this['is' + this.shape['type']] && this['is' + this.shape['type']]();
      },
      immediate: true
    }
  },
  mounted(){
    
  },
  methods: {
    setShowProperties(){
      let properties = [];
      (this.shape['propertiesTitle'] || []).forEach(
        item => {
          if (this.showProperties.includes(item['key'])) {
            if (this.shape['type'] === 'BPMNDiagram' && item['key'] === 'oryx-documentation') {
              // ...
            } else {
              properties.push(item);
            }
          }
        }
      )
      this.properties = properties;
    },
    change(){
      this.properties.forEach(
        item => {
          if(!this.excludeFields.includes(item['key'])){
            this.shape['properties'][item['key']] = item['value'] || "";
          }
        }
      );
      this.$emit('saveShape' , this.shape);
    },
    isUserTask() {

      // this.roles = this.shape['roles'];
      this.setDefaultRole();

      this.properties.push({
        title: '指定角色',
        key: 'oryx-usertaskassignment',
        type: 'role'
      });

      // oryx-formproperties
      if (!this.shape['properties']['oryx-formproperties']) {

        this.shape['properties']['oryx-formproperties'] = {
          formProperties: [{
            id: 'button_list',
            name: 'button_list',
            readable: true,
            type: 'enum',
            writable: true,
            enumValues: [{
              id: '确定',
              name: 'true'
            }]
          }]
        }
        this.change();
      }

    },
    setDefaultRole(values) {
      if (
        !this.shape['properties']['oryx-usertaskassignment'] ||
        !this.shape['properties']['oryx-usertaskassignment']['assignment'] ||
        !this.shape['properties']['oryx-usertaskassignment']['assignment']['candidateGroups']
      ) {
        this.shape['properties']['oryx-usertaskassignment'] = {
          assignment: {
            candidateGroups: []
          }
        }
      }
      if(values){
        if(this.shape['properties']['oryx-usertaskassignment']['assignment']['candidateGroups']){
          this.shape['properties']['oryx-usertaskassignment']['assignment']['candidateGroups'] = [];
          this.candidateGroups.forEach(
            item => {
              this.shape['properties']['oryx-usertaskassignment']['assignment']['candidateGroups'].push({
                value: item
              })
            }
          )
        }
      }else{
        if(this.shape['properties']['oryx-usertaskassignment']['assignment']['candidateGroups']){
          this.candidateGroups = [];
          this.shape['properties']['oryx-usertaskassignment']['assignment']['candidateGroups'].forEach(
            item => {
              this.candidateGroups.push(item.value);
            }
          )
        }
      }

    },

    candidateGroupsChange(value){
      this.setDefaultRole(value);
      this.change();
    }

  }
}
</script>
<style lang="scss" scoped>
.w-80-c{
  width: calc(100% - 80px);
}
</style>